
import './static/css/App.css';

import { Suspense} from 'react'
import { BrowserRouter,Routes,Route} from "react-router-dom"

import route from './routers/route'
import RequireAuth from './routers/RequireAuth'



// 定义接口规范
interface Iroute{
  title:any;
  path:string
  element:JSX.Element
  children ?:Array<Iroute>
}
function App() {
  return (
    <BrowserRouter>
      <Routes>
        {
          route.map((item:Iroute,index:number)=>(
            <Route key={index} path={item.path}  element={
              <Suspense fallback={<div>loading.....</div>}>
                <RequireAuth path={item.path} title={item.title}>{item.element}</RequireAuth>
              </Suspense>
            }>
              {
                item.children &&
                item.children.map((citem,cindex)=>(
                  <Route key={cindex} path={citem.path} element={
                    <Suspense fallback={<div>loading.....</div>}>
                      <RequireAuth path={citem.path} title={citem.title}>{citem.element}</RequireAuth>
                    </Suspense>
                  }></Route>
                ))
              }
            </Route>
          ))
        }
        
      </Routes>
    </BrowserRouter>
  );
}
export default App;
